import React from 'react';
import { Link } from 'react-router-dom';
import { observer, inject } from 'mobx-react';
import { Button, Radio, Icon } from 'antd';

import { TopHeader } from '../../components';

import './index.scss'


@inject('courseListStore')
@inject('chapterListStore')
@inject('baseStore')
@inject('entry05Store')
@observer
class Entry05 extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			index: 0,  //索引
			type: 0,  // 书法知识|典故
			len: 0
		};
	}

	componentDidMount() {

		this.props.baseStore.topHeader.title = "书法空间";

		this.props.baseStore.topHeader.show = true;

		var index = this.props.match.params.index || '';
		var type = this.props.match.params.type || '';

		if (index == "") {
			this.props.history.push('/entry_05');
			return;
		}

		if (type == "") {
			this.props.history.push('/entry_05');
			return;
		}

		this.props.baseStore.topHeader.backTo = '/entry_05/' + type;


		var typeKey = "know_list_one";
		if (type == 1) {
			typeKey = "know_list_two";
		}

		var len = this.props.entry05Store[typeKey].length;
		if (len == 0) {
			this.props.history.push('/entry_05/' + type);
			return;
		}


		this.setState({
			index: parseInt(index),
			type: parseInt(type),
			len: len
		})


		// var player = polyvPlayer({
		// 	wrap: '#player',
		// 	width: 800,
		// 	height: 533,
		// 	vid: '88083abbf5535a4d7b4d8614427559e0_8',
		// });

	}


	componentWillUnmount = () => {
		this.setState = (state, callback) => {
			return;
		};
	}

	
	toShowPage = (item) => {
		var directoryId = item.DirectoryID;
		this.props.history.push('/entry_0501/' + directoryId);
	}

	changeTypeClick = (type) => {
		this.setState({
			type: type
		})
		type == 0 && this.props.entry05Store.GetWritingKnowledgeList();
		type == 1 && this.props.entry05Store.GetWritingStoryList();

		this.props.history.push('/entry_05/' + type);

	}

	nextClick = () => {

		this.setState({
			index: this.state.index + 1
		})
	}

	preClick = () => {

		this.setState({
			index: this.state.index - 1
		})
	}

	render() {

		var item = null;
		var has = false;


		var typeKey = "know_list_one";
		if (this.state.type == 1) {
			typeKey = "know_list_two";
		}

		var len = this.props.entry05Store[typeKey].length;
		console.log(len, "========len=========");




		if (this.props.entry05Store[typeKey][this.state.index]) {

			item = this.props.entry05Store[typeKey][this.state.index]
			has = true;
		}


		console.log(this.state.preBtnDisabled, "========preBtnDisabled=========");
		console.log(this.state.nextBtnDisabled, "========nextBtnDisabled=========");

		//有视频
		var video_or_pic;
		if (item['VideoURL'] && item.VideoURL.length > 0) {

			if (item.VideoURL.lastIndexOf('.mp4') > -1) {
				video_or_pic = <video webkit-playsinline src={this.props.baseStore.GetFinalImageUrl(item.VideoURL)} controls="controls"></video>;
			} else {
				video_or_pic = <iframe src={"../../../baoli.html?width=1000&height=700&autoplay=1&key=" + item.VideoURL} />
			}
		} else {
			video_or_pic = <img src={this.props.baseStore.GetFinalImageUrl(item.ImageURL)} alt="" />
		}

		return (
			<div className="Entry0501 page_container animated fadeInDown  fast">
				<div className="side_wrap">
					<div className="side_body">
						<div className={this.state.type == 0 ? "each_entry active" : "each_entry "} onClick={() => { this.changeTypeClick(0) }}></div>
						<div className={this.state.type == 1 ? "each_entry two active" : "each_entry two "} onClick={() => { this.changeTypeClick(1) }}></div>
					</div>
				</div>
				<div className="main_wrap">

					{
						has ? (<div className="main_container">

							<div className="knowledge_container">

								<div className="one">{item.DirectoryName}</div>
								<div className="two">
									{/* <video src={this.props.baseStore.GetFinalImageUrl(item.VideoURL)} src="http://223.68.159.69:1001/Images/video/士.mp4" controls="controls"></video> */}
									{
										video_or_pic
									}

								</div>
								<div className="three">
									{item.Description}
								</div>
								<div className="four">

									<Button.Group size="large" shape="round">
										<Button type="primary" shape="round" onClick={() => { this.preClick() }} disabled={this.state.index < 1} >
											<Icon type="left" />
											上一个
         								</Button>
										<Button type="primary" shape="round" onClick={() => { this.nextClick() }} disabled={this.state.len <= this.state.index + 1} >
											下一个
            								<Icon type="right" />
										</Button>
									</Button.Group>
								</div>

							</div>

						</div>) : null
					}




				</div>



			</div>
		);
	}
}

export default Entry05;